<template>
  <div>
    <el-row class="contact-container">
      <el-col :md="24" class="title">
        <i class="fa fa-comments"></i>
        <span>联系律师</span>
      </el-col>
      <el-col :md="24" class="contact">
        <h1 class="text-xl">{{ site_config.short_name }}</h1>
        <p class="text-sm">
          手机号：<span class="text-lg">{{ site_config.mobile }}</span>
        </p>
        <p class="text-sm">
          微信：<span class="text-lg">{{ site_config.mobile }}</span>
        </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const site_config = useSiteConfigStore();
</script>

<style scoped>
.title {
  color: #fff;
  background-color: #333333;
  font-size: 20px;
  padding: 10px;
  text-shadow: 0px 1px 2px #070402;
}
.fa-comments {
  margin-right: 0.416em;
}
.contact {
  padding: 10px;
}
.contact h1,
p {
  margin-bottom: 10px;
}
.contact-container {
  background-color: #fff;
}
</style>
